<script setup lang="ts">
import { useRoute } from 'vue-router'
import { showToast } from '@nutui/nutui'
import AcceptenceSection from './components/AcceptenceSection.vue'

import useFetch from '@/hooks/useFetch'
import ApiCustomer from '@/api/customer'

export type TAcceptanceData = {
  customerConfirmDate: string
  customerConfirmPic: string
  nextAcceptDate: string
  createDate: string
  createUser: string
  intentCustomerInfo: {
    customerName: string
    mobileTelephone: string
    decorationFullAddress: string
  }
  list: {
    quesNaireName: string
    quesNaireId: 0
    quesNaireNo: string
    quesNaireType: string
    quesNaireContent: {
      quesId: 0
      quesNo: 0
      quesName: string
      quesRemark: string
      picList: string[]
      options: {
        isQualified: boolean
        isCheck: boolean
        optionsName: string
      }[]
    }[]
  }[]
}

const { query } = useRoute()

// 获取展示信息
const { data, error, refresh } = useFetch<TAcceptanceData>(
  ApiCustomer.acceptanceCustomersPageDetail,
  {
    method: 'POST',
    // 这里的recordMainId 需要使用带时间戳的加密ID
    defaultParams: { recordMainId: query.encryptToken },
  },
)

// 提交表单
const { loading, run } = useFetch<any>(ApiCustomer.acceptanceCustomersConfirm, {
  manual: true,
  method: 'POST',
  onSuccess() {
    showToast.success('提交成功')
    refresh()
  },
})
</script>

<template>
  <div v-if="!!error" class="h-screen w-full flex items-center justify-center">
    <div>
      <img src="@/assets/svg/expire.svg" class="w-120px" />
      <div class="text-center text-third">分享码已过期</div>
    </div>
  </div>

  <template v-else>
    <div class="bg-white p-3 shadow-lg rounded-b-xl">
      <div class="font-bold">
        {{ data?.intentCustomerInfo?.customerName }}（{{ data?.intentCustomerInfo.mobileTelephone }}）
      </div>
      <div class="my-2 text-sm text-#999">
        地址：{{ data?.intentCustomerInfo?.decorationFullAddress }}
      </div>

      <div class="border-t">
        <div class="flex py-2">
          <span class="pr-2">创建人</span>
          <div>{{ data?.createUser }}</div>
        </div>

        <div class="flex py-2">
          <span class="pr-2">创建时间</span>
          <div>{{ data?.createDate }}</div>
        </div>

        <div class="flex py-2">
          <span class="pr-2">下次验收</span>
          <div>{{ data?.nextAcceptDate }}</div>
        </div>
      </div>
    </div>

    <!-- <div class="m-3 bg-white p-3 shadow-lg rounded-xl">
      <div class="border-b pb-2">客户信息</div>

      <div class="flex py-2">
        <span class="pr-2">姓名：{{ data?.intentCustomerInfo.customerName }}</span>
      </div>

      <div class="flex py-2">
        <span class="pr-2">电话：{{ data?.intentCustomerInfo.mobileTelephone }}</span>
      </div>

      <div class="flex py-2">
        <span class="pr-2">地址: </span>
        <div>{{ data?.intentCustomerInfo.decorationFullAddress }}</div>
      </div>
    </div> -->

    <div class="mb-5 mx-3" v-for="item in data?.list" :key="item.quesNaireId">
      <div class="mt-3 mb-1 text-second text-sm">{{ item.quesNaireName }}</div>
      <AcceptenceSection
        v-for="subitem in item.quesNaireContent"
        :key="subitem.quesId"
        :source="subitem"
      />
    </div>

    <!-- <div v-if="data" class="m-2 rounded-lg p-2 bg-white">
      <div class="flex justify-between py-2">
        <div class="mb-2 text-xs text-#999">客户验收</div>
        <div>{{ data?.customerConfirmDate }}</div>
      </div>
    </div> -->
  </template>
</template>
